

.self {
  font-family: inherit;
  border: none;
  border-radius: 28px;
  cursor: pointer;

  &:disabled {
    cursor: default;
  }
}

.primary {
  color: var(--button-primary-color);
  background-image: var(--button-primary-bg);

  &:hover {
    background-image: var(--button-primary-bg-hover);
  }

  &:active {
    background-image: var(--button-primary-bg-active);
  }

  &:disabled {
    color: var(--button-primary-color-disabled);
    background-image: var(--button-primary-bg-disabled);
  }
}

.secondary {
  color: var(--button-secondary-color);
  background-color: var(--button-secondary-bg);

  &:hover {
    background-color: var(--button-secondary-bg-hover);
  }

  &:active {
    background-color: var(--button-secondary-bg-active);
  }

  &:disabled {
    color: var(--button-secondary-color-disabled);
    background-color: var(--button-secondary-bg-disabled);
  }
}

.outlined {
  color: var(--button-outlined-color);
  background-color: transparent;
  border: 1px solid var(--button-outlined-border);

  &:hover {
    background-color: var(--button-outlined-bg-hover);
  }

  &:active {
    background-color: var(--button-outlined-bg-active);
  }

  &:disabled {
    color: var(--button-outlined-color-disabled);
    background-color: transparent;
    border: 1px solid var(--button-outlined-border-disabled);
  }
}

.text {
  color: var(--primary);
  background-color: transparent;
  min-width: fit-content !important;
  min-height: fit-content !important;
  padding: 0;

  &:hover:enabled {
    text-decoration: underline;
  }

  &:active {
    color: var(--button-text-color-active);
  }

  &:disabled {
    color: var(--button-text-color-disabled);
  }
}

.large {
  font-size: 16px;
  min-width: 131px;
  min-height: 50px;
}

.medium {
  font-size: 14px;
  min-width: 104px;
  min-height: 40px;
}

.small {
  font-size: 13px;
  min-width: 81px;
  min-height: 30px;
}
